<ion-header>
    <ion-toolbar>
        <ion-title>
            <h1>{{ 'addon.messages.groupinfo' | translate }}</h1>
        </ion-title>
        <ion-buttons slot="end">
            <ion-button fill="clear" (click)="closeModal()" [ariaLabel]="'core.close' | translate">
                <ion-icon name="fas-xmark" slot="icon-only" aria-hidden="true" />
            </ion-button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>
<ion-content>
    <ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="refreshData($event.target)">
        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
    </ion-refresher>

    <core-loading [hideUntil]="loaded" placeholderType="imageandboxes">
        <ion-item class="ion-text-center" *ngIf="conversation">
            <ion-label>
                <div class="large-avatar">
                    <img class="avatar" [url]="conversation.imageurl" core-external-content [alt]="conversation.name"
                        onError="this.src='assets/img/group-avatar.svg'">
                </div>
                <h2>
                    <!-- WS didn't filter the name, see MDL-81815. -->
                    <core-format-text [text]="conversation.name" contextLevel="system" [contextInstanceId]="0" [wsNotFiltered]="true" />
                </h2>
                <p>
                    <core-format-text *ngIf="conversation.subname" [text]="conversation.subname" contextLevel="system"
                        [contextInstanceId]="0" />
                </p>
                <p>{{ 'addon.messages.numparticipants' | translate:{$a: conversation.membercount} }}</p>
            </ion-label>
        </ion-item>

        <ion-item class="ion-text-wrap addon-messages-conversation-item" *ngFor="let member of members" (click)="closeModal(member.id)"
            [detail]="true" button>
            <core-user-avatar [user]="member" [linkProfile]="false" [checkOnline]="member.showonlinestatus" slot="start" />
            <ion-label>
                <p class="item-heading">
                    {{ member.fullname }}
                    <ion-icon name="fas-user-slash" *ngIf="member.isblocked"
                        [attr.aria-label]="'addon.messages.contactblocked' | translate" />
                </p>
            </ion-label>
        </ion-item>

        <core-infinite-loading [enabled]="canLoadMore" (action)="loadMoreMembers($event)" [error]="loadMoreError" />
    </core-loading>
</ion-content>
